<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>动态创建表格测 - JQ</title>
		<style>
			input[type="button"] {
				height: 40px;
				width: 200px;
				margin-bottom: 23px;
				font-size: 16px;
				background: #ff0;
			}
			
			table, td {
				border: 1px solid #888888;
				border-collapse: collapse;
				margin: 26px auto;
			}
			
			td {
				color: palegreen;
				font-size: 14px;
				padding: 5px 12px;
			}
			
			hr {
				border: 1px dotted #FF0000;
			}
		</style>
		<script src="../js/jquery-1.8.3.min.js"></script>
		<script>
			function createTable() {
				/* // 1.创建table对象
				var table = $("<table></table>");
				// 2.创建tr对象
				var tr = $("<tr></tr>");
				// 3.创建td对象
				var td = $("<td>这是一个单行单列的表格</td>");
				// 4.把td对象添加到tr对象
				tr.append(td);
				// 5.把tr对象添加到table对象
				table.append(tr);
				// 6.把table对象添加到body对象
				$("body").append(table); */
				
				// 简写
				$("body").append("<table><tr><td>一首简单的歌</td></tr></table>");
			}
			
			function createTableMuti() {
				// 1.创建table对象
				var table = $("<table></table>");
				// 2.循环创建tr对象
				// 3.循环创建td对象，并添加到tr对象中
				// 4.把tr对象添加到table对象
				for (var i = 0; i < 4; i++) {
					var tr = $("<tr></tr>");
					for (var j = 0; j < 5; j++) {
						var cellData = (i + 1) + " + " + (j + 1) + " = " + (i + j + 2);
						var td = $("<td>" + cellData + "</td>");
						tr.append(td);
					}
					table.append(tr);
				}
				// 5.把table对象添加到body对象
				$("body").append(table);
			}
			
			function customCreateTable() {
				var rowCount = $("#rows").val();
				var colCount = $("#cols").val();
				// 数据检查
				if (rowCount == "" || colCount == "") {
					alert("行和列不能为空");
					return;
				}
				
				var table = $("<table></table>");
				for (var i = 0; i < rowCount; i++) {
					var tr = $("<tr></tr>");
					for (var j = 0; j < colCount; j++) {
						var cellData = "第" + (i + 1) + "行,第" + (j + 1) + "列";
						var td = $("<td>" + cellData + "</td>");
						tr.append(td);
					}
					table.append(tr);
				}
				$("body").append(table);
			}
		</script>
	</head>
	<body>
		<input type="button" value="创建单行单列的表格" onclick="createTable()" /><br />
		<input type="button" value="创建4行5列的表格" onclick="createTableMuti()" /><br />
		<input type="button" value="自定义创建表格" onclick="customCreateTable()" /><br />
		行数：<input type="text" name="rowCount" id="rows" /><br />
		列数：<input type="text" name="colCount" id="cols" />
		<hr />
	</body>
</html>
